<!DOCTYPE HTML>
<html>
<head>
<!--jQuery dependencies-->
    <link rel="stylesheet" href="../../pqgrid/css/jquery-ui-base-1.9.1.css" />
    <script src="../../pqgrid/js/jquery-1.9.1.min.js"></script>    
    <script src="../../pqgrid/js/jquery-ui-1.9.2.min.js"></script>
<!--PQ Grid files-->
    <link rel="stylesheet" href="../../pqgrid/pqgrid.min.css" />
    <script src="../../pqgrid/pqgrid.min.js"></script>
<!--PQ Grid Office theme-->
    <link rel="stylesheet" href="../../pqgrid/themes/office/pqgrid.css" />

<script>
    $(function () {
        var noRows = 1000000; //1 million.
        var dataCache = [noRows];

        //initialize the data array.
        for (var i = 0; i < noRows; i++) {
            dataCache[i] = "";
        }
        var initTime = new Date();
        var obj = {
            sortable: false,
            selectionModel: { type: 'row' },
            scrollModel: { autoFit: true },
            numberCell: { width: 70, resizable: true },
            title: "<p style='text-align:center;'>Grid with <b>1 million</b> Records!!<p>",
            virtualX: true, virtualY: true,
            resizable: true,
            colModel: [
                { title: "Company", dataType: "string" },
                { title: "Notes", dataType: "string" },
                { title: "Revenues ($ millions)", dataType: "float", align: "right" },
                { title: "Profits ($ millions)", dataType: "float", align: "right" }
            ],
            dataModel: {
                data: dataCache
            },
            beforeTableView: function (evt, ui) {
                var curPos = ui.initV;
                var finalPos = ui.finalV;
                var data = ui.pageData;

                for (var i = curPos; i <= finalPos; i++) {
                    if (data[i].length == 0) {
                        data[i] = [];
                        data[i][0] = "Company " + (i + 1);
                        data[i][1] = "Notes " + (i + 1);
                        data[i][2] = Math.round(Math.random() * 10000);
                        data[i][3] = Math.round(Math.random() * 100);
                    }
                }
            }
        };

        $("#grid_infinite").pqGrid(obj);

        var finalTime = new Date();        
        $("#count_rows").html(noRows);
        $("#display_time").html(finalTime - initTime);
    });
        
</script>    
</head>
<body>

<div id="grid_infinite"></div>
<br>

</body>

</html>
